<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrap {
				margin: 200px auto;
				width: 200px;
				height: 200px;
				position: relative;
				transition: 2s;
				transform-origin: center center 100px;
				transform-style: preserve-3d;
				transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
			}
			.wrap:hover {
				transform-style: preserve-3d;
				transform: perspective(1000px) rotateY(450deg) rotateX(-300deg);
			}
			.wrap>div {
				width: 200px;
				height: 200px;
				position: absolute;
				top: 0;
				left: 0;
			}
			.wrap>div:nth-child(1){
				background-color: #0086B3;
				opacity: 0.6;
			}
			.wrap>div:nth-child(2){
				background-color: #4d1db3;
				opacity: 0.6;
				transform:translateX(100%);
				transform-origin: right;
				transform: rotateY(90deg);
			}
			.wrap>div:nth-child(3){
					opacity: 0.6;
				background-color: #64b371;
				transform:translateX(-100%);
				transform-origin: left;
				transform: rotateY(-90deg);
			}
			.wrap>div:nth-child(4){
					opacity: 0.6;
				background-color: #b3aa98;
				transform: translateZ(200px);
			}
			.wrap>div:nth-child(5){
					opacity: 0.6;
				background-color: #ffff7f;
				z-index: 2;
				transform-origin:bottom;
				transform: rotateX(-90deg) s;
			}
			.wrap>div:nth-child(6){
					opacity: 0.6;
				background-color: #555500;
				transform-origin:top;
				transform: rotateX(90deg);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>
